<template lang="jade">
  div.view-wrapper
    el-card
      el-tabs(v-model="tab")
        el-tab-pane(label="企业信息" name="fundamental",v-loading="loading",element-loading-text="获取数据中...",
        element-loading-spinner="el-icon-loading")
          el-form
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 企业名称
              el-col(:span="10")
                el-form-item
                  span.lbl-project.pull-left {{corporation.name}}
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 法人代表身份证
              el-col(:span="4")
                el-form-item
                  img.img-thumbnail(alt="法人代表身份证正面",:src="corporation.id_card_front")
              el-col(:span="4")
                el-form-item
                  img.img-thumbnail(alt="法人代表身份证正面",:src="corporation.id_card_reverse")
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 法人代表姓名
              el-col(:span="4")
                el-form-item
                  span.lbl-project.pull-left {{corporation.legal_representative}}
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 营业年限
              el-col(:span="4")
                el-form-item
                  span.lbl-project.pull-left {{corporation.business_t}}
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 注册资本
              el-col(:span="4")
                el-form-item
                  span.lbl-project.pull-left {{corporation.registered_capital || '未录入'}}
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 企业规模
              el-col(:span="4")
                el-form-item
                  span.lbl-project.pull-left {{corporation.scale}}
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 联系电话
              el-col(:span="4")
                el-form-item
                  span.lbl-project.pull-left {{corporation.phone || '暂无'}}
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 资质政府附件
              el-col(:span="4")
                el-form-item
                  span.lbl-project.pull-left.active-color 点击下载
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 营业执照注册号
              el-col(:span="4")
                el-form-item
                  img.img-thumbnail(alt="营业执照注册号",:src="corporation.business_license_img")
            el-row(:gutter="20")
              el-col(:span="3")
                el-form-item
                  span.lbl-project.lbl-title 注册地址
              el-col(:span="10")
                el-form-item
                  span.lbl-project.pull-left {{corporation.detail_address}}
            el-row(:gutter="20")
              el-col(:span="3")
                span.invisible *
              el-col(:span="10")
                el-button(@click="goBack",style="width:100px;height:35px") 返回
        el-tab-pane(name="admin",label="管理员账号")
          el-row(:gutter="20")
            el-col(:span="20")
              div.role-item
                span.role-label
                  span.required *
                  |&nbsp;姓名
                span.role-label-text 超级管理员
              div.role-item
                span.role-label.font-gray 注册邮箱
                el-input.input-wrapper.no-border(placeholder="请输入注册邮箱",type="email")
              div.role-item
                span.role-label
                  span.required *
                  |&nbsp;手机号
                span.role-label-text 15184406336
              div.role-item
                span.role-label.font-gray QQ
                el-input.input-wrapper.no-border(placeholder="请输入QQ号码")
              div.role-item
                span.role-label
                  span.required *
                  |登录密码
                el-input.input-wrapper.no-border(placeholder="请输入登录密码",type="password")
              div.role-item
                span.role-label
                  span.required *
                  |确认密码
                el-input.input-wrapper.no-border(placeholder="请再次输入密码",type="password")
              div.role-item
                span.role-label
                  span.required *
                  |头像
                el-upload.avatar-uploader(:show-file-list="false",:on-success="handleAvatarSuccess", :before-upload="beforeAvatarUpload",action="https://jsonplaceholder.typicode.com/posts/")
                  i.el-icon-plus.avatar-uploader-icon
              div.role-item
                span.role-label
                  span.required *
                  |地址
                el-row(:gutter="30")
                  el-col(:span="6")
                    el-select(style="width=100%",placeholder="请选择省份")
                  el-col(:span="6")
                    el-select(style="width=100%",placeholder="选择市州")
                  el-col(:span="6")
                    el-select(style="width=100%",placeholder="选择县区")
                el-row(:gutter="30")
                  el-col(:span="18",style="margin-top:20px")
                    el-input(type="textarea",placeholder="请输入详细地址",resize="none",:rows="4")
          el-row(:gutter="20")
            el-col(:span="24")
              div.button-bottom-wrapper
                el-button(type="primary",style="width:100px;") 提交
                el-button(style="width:100px;height:35px") 取消
        el-tab-pane(name="staff",label="员工列表")
</template>

<script>
  import utilsApi from '@/api/utils'
  export default {
    name: 'AccountantDetail',
    data: () => ({
      tab: 'fundamental',
      loading: false,
      corporation: {}
    }),
    mounted () {
      var cId = this.$route.params.cId
      this.loading = true
      utilsApi.getCurrentCorporation(cId).then(res => {
        this.loading = false
        if (res.data.data) {
          this.corporation = Object.assign({}, this.corporation, res.data.data)
        }
      }, err => {
        this.loading = false
        this.$message({
          type: 'error',
          message: err.response.data.message
        })
      })
    },
    methods: {
      handleAvatarSuccess () {},
      beforeAvatarUpload () {},
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";

  .lbl-title{
    font-size: 15px;
    font-weight: bold;
  }

  .img-thumbnail{
    width: 100%;
    border-radius: 5px;
  }

  .invisible{
    opacity: 0;
    visibility: hidden;
  }

  .role-item{
    padding-bottom: 15px;
    border-bottom: 1px solid #dcdfe6;
    margin-top: 15px;
    &:first-child{
      margin-top: 0px;
    }
  }

  .role-label{
    font-size: 16px;
    display: block;
    height: 30px;
    line-height: 30px;
    color: $font-color;
    margin-bottom: 10px ;
  }

  .role-label-text{
    font-size: 18px;
    margin-left: 40px;
    color: $font-color;
  }

  .font-gray{
    color: #ccc;
  }

  .input-wrapper{
    padding-left: 40px;
  }

  .button-bottom-wrapper{
   margin-top: 20px;
  }

  .active-color{
    color: $active-color;
  }

</style>
